<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jquery-1.11.3.js"></script>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/list.css" />
    <link rel="stylesheet" href="../css/base.css" />
  </head>

  <body>
    <!-- 头部 -->
    <div class="header">
      <!-- 顶部导航栏 -->
      <div class="nav">
        <div class="nav_container">
          <ul class="nav_left">
            <li>
              <a href="index.html">
                <s class="home"></s>
                <span>网站首页</span>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <s class="weixin"></s>
                <span>微信</span>
                <img src="../imgs/index/header/icon_down.png" alt="" />
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <s class="phone"></s>
                <span>手机访问</span>
                <img src="../imgs/index/header/icon_down.png" alt="" />
              </a>
            </li>
          </ul>
          <ul class="nav_right">
            <li><a>Hi,欢迎来到手机商城!</a></li>
            <li><a href="login.html">登录</a></li>
            <li><a href="register.html">注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">账户中心</a></li>
            <li><a href="#">商户中心</a></li>
            <li><a href="#">帮助中心</a></li>
          </ul>
        </div>
      </div>
      <!-- 头部搜索 -->
      <div class="headerMiddle">
        <img src="../imgs/index/header/title.png" alt="" />
        <div class="myCart">
          <img src="../imgs/index/header/icon_cartOn.png" alt="" />
          <a href="cart.html">我的购物车</a>
          <img src="../imgs/index/header/bg_upArrow.png" alt="" />
        </div>
      </div>
      <div class="search">
        <input
          type="text"
          class="searchInput"
          placeholder="请输入要搜索的关键词"
        />
        <a href="">搜索</a>
      </div>
      <!-- 头部选项卡 -->
      <ul class="headerTab">
        <li><a href="./index.html" style="color: #c81623">首页</a></li>
        <li><a href="./list.html">全部商品</a></li>
        <li><a href="./list.html">华为</a></li>
        <li><a href="./list.html">荣耀</a></li>
        <li><a href="./list.html">苹果</a></li>
        <li><a href="./list.html">魅族</a></li>
        <li><a href="./list.html">三星</a></li>
        <li><a href="./list.html">OPPO</a></li>
        <li><a href="./list.html">VIVO</a></li>
        <li><a href="./list.html">小米</a></li>
      </ul>
    </div>
    <!-- 位置指示 -->
    <div class="path">
      <span>您现在的位置:</span>
      <ul>
        <li><a href="">首页</a></li>
      </ul>
    </div>
    <!-- 品牌筛选 -->
    <div class="brand">
      <ul class="brand-ul">
        <li>品牌：</li>
        <li class="active"><a href="javascript:;">全部</a></li>
        <li><a href="javascript:;">华为</a></li>
        <li><a href="javascript:;">OPPO</a></li>
        <li><a href="javascript:;">VIVO</a></li>
        <li><a href="javascript:;">苹果</a></li>
        <li><a href="javascript:;">三星</a></li>
        <li><a href="javascript:;">小米</a></li>
        <li><a href="javascript:;">荣耀</a></li>
      </ul>
    </div>
    <!-- 查看方式 -->
    <div class="preview">
      <ul class="preview-ul">
        <li>默认</li>
        <li>
          <a href="javascript:;"> 销量<span></span> </a>
        </li>
        <li>
          <a href="javascript:;"> 价格<span></span> </a>
        </li>
        <li>
          <a href="javascript:;"> 上架时间<span></span> </a>
        </li>
        <li>
          <a href="javascript:;"> 人气<span></span> </a>
        </li>
      </ul>
      <!-- 只看有货商品 -->
      <div class="isHave">
        <input type="checkbox" />
        <span>只看有货商品</span>
      </div>
      <!-- 手动输入价格区间 -->
      <div class="preview-price">
        <input type="text" placeholder="¥" />
        <span>-</span>
        <input type="text" placeholder="¥" />
        <a class="btn-confirm">确认</a>
      </div>
      <!-- 搜索框 -->
      <div class="preview-search">
        <input type="text" />
        <a>搜索</a>
      </div>
      <!-- 页数选择 -->
      <div class="btn-page">
        <a class="btn-pageL"></a>
        <span> 1</span>
        <span>/</span>
        <span> 5</span>
        <a class="btn-pageR"></a>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="product">
      <!-- <div class="spec">
      <span class="spec-sale">
        <span>热卖</span>
      </span>
      <div class="spec-img">
        <img src="../imgs/list/266/250_CIB3GYXGUA20200316111205.jpg" alt="" />
      </div>
      <div class="spec-sm">
        <img src="../imgs/list/60/60_MTWIS37L9G20200316111202.jpg" alt="" />
        <img src="../imgs/list/60/60_TFN5BJJL4P20200316111204.jpg" alt="" />
        <img src="../imgs/list/60/60_CIB3GYXGUA20200316111205.jpg" alt="" />
      </div>
      <p class="spec-price">¥1499.00</p>
      <p class="spec-title">华为 HUAWEI 畅享 10S 全网通双4G手机 双卡双待</p>
      <p class="spec-count">75销量</p>
    </div> -->
    </div>
    <!-- 上下分页 -->
    <div class="page">
      <ul class="pageC-btn">
        <span class="prevpage">上一页</span>
        <li class="page-active"><a>1</a></li>
        <li><a>2</a></li>
        <span class="nextpage">下一页</span>
        <span class="lastpage">尾页</span>
        <span>共5页</span>
        <span>到第</span>
        <input type="text" class="page-input" />
        <span>页</span>
        <a class="page-confirm">确认</a>
      </ul>
      <div class="page-input"></div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <ul>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务详情</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
      <p>Copyright © 2016 北京熠天海纳科技有限公司 京ICP备16043770号</p>
      <div class="authentication">
        <a href="#"><img src="../imgs/index/footer/bottom01.png" alt="" /></a>
        <a href="#"><img src="../imgs/index/footer/bottom02.png" alt="" /></a>
        <a href="#"><img src="../imgs/index/footer/bottom03.png" alt="" /></a>
      </div>
    </div>

    <script src="../js/list.js"></script>
  </body>
</html>
